<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报表图示例</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
    <link th:href="@{/css/plugins/datapicker/datepicker3.css}" rel="stylesheet">
    <style>
        a:link, a:visited {
            text-decoration: none; /*超链接无下划线*/
        }
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .widget-header > .widget-caption {
            line-height: 30px;
        }

        .table1 tbody {
            display: block;
        }

        .title-color{
            width: 100%;text-align: center;font-size: 24px;color:#1c83db;
            font-weight: bold;
        }

        .table1 thead, .table1 tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .table > thead > tr > th {
            vertical-align: middle;
            padding: 0 4px;
        }
        tbody::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px #DCDCDC;
            background-color: #F5F5F5;
        }
        tbody::-webkit-scrollbar {
            width: 8px;
            background-color: #F5F5F5;
        }
        tbody::-webkit-scrollbar-thumb {
            background-color: #DCDCDC;
        }
        .btn {
            display: inline-block;
            padding: 3px 10px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .btn, .btn-default, .btn:focus, .btn-default:focus {
            color: #444 !important;
            background-color: #fff !important;
            border-color: #ccc !important;
        }
        .btn:hover, .btn-default:hover, .btn:active, .btn-default:active, .open > .btn.dropdown-toggle, .open > .btn-default.dropdown-toggle {
            background-color: #d9d9d9 !important;
            border-color: #d9d9d9 !important;
        }
        .table thead > tr > th {
            font-size: 12px;
        }
        .card-body {
            padding: 3rem 3rem;
        }
        .card-body-icon {
            position: absolute;
            top: 5.5rem;
            right: 37px;
            font-size: 5rem;
        }
        .text-white {
            color: #fff;
        }
        .row {
            margin: 2rem 0;
        }
        .btn-purple {
            background-color: #7e3794 !important;
            border-color: #7e3794;
            color: #ffffff;
        }
        .btn-blue {
            background-color: #5b8b94 !important;
            border-color: #5b8b94;
            color: #ffffff;
        }
        .btn-grey {
            background-color: #948065 !important;
            border-color: #948065;
            color: #ffffff;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row ">
        <div class="title-color">沂南县冬季用煤取暖信息库</div>
        <fieldset class="table-search-fieldset">
            <legend style="padding-left: 15px">
                <label th:text="${controlText}" th:if="${controlText !=''}"></label>
                <label th:text="${shopName}" th:if="${controlText =='' && shopName !=''}"></label>
                <label th:text="控制台" th:if="${controlText =='' && controlText ==''}"></label>
            </legend>
        </fieldset>

        <div class="col-xs-3">
            <a href="javascript:;">
                <div class="card text-white btn-warning o-hidden h-100" title="点击跳转" onclick="goUrl(2)">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="ace-icon glyphicon glyphicon-signal"></i>
                        </div>
                        <div class="mr-5" style="margin-bottom: 1rem;"><span
                                style="font-size:20px;margin-right:10px;">包保责任人数量 </span></div>
                        <h2 class="mr-5" id="event_count_1">
                            <span th:text="${user0Count}"></span>人
                        </h2>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-xs-3 ">
            <a href="javascript:;">
                <div class="card text-white btn-warning o-hidden h-100" title="点击跳转" onclick="goUrl(2)">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="ace-icon glyphicon glyphicon-signal"></i>
                        </div>
                        <div class="mr-5" style="margin-bottom: 1rem;"><span style="font-size:20px;margin-right:10px;">督导巡检人数量</span></div>
                        <h2 class="mr-5">
                            <span th:text="${user1Count}"></span>人
                        </h2>
                    </div>
                </div>
            </a>
        </div>

<!--        巡检地点数量-->
        <div class="col-xs-3">
            <a href="javascript:;">
                <div class="card text-white btn-purple o-hidden h-100" title="点击跳转" onclick="goUrl(3)">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="ace-icon glyphicon glyphicon-signal"></i>
                        </div>
                        <div class="mr-5" style="margin-bottom: 1rem;">
                            <span style="font-size:20px;margin-right:10px;">总住户数量</span>
                            <span style="font-size:20px;margin-right:10px;" th:text="${citizenCount}"></span>户</div>
<!--                        <h2 class="mr-5" id="event_count_3">-->
<!--                            <span th:text="${citizenCount}"></span>户-->
<!--                        </h2>-->
                        <div class="mr-5" style="margin-bottom: 1.8rem;">
                            <span style="font-size:20px;margin-right:10px;">未上报住户数</span>
                            <span style="font-size:20px;margin-right:10px;" th:text="${citizenNoSurveyCount}"></span>户
                        </div>
<!--                        <h2 class="mr-5" id="event_count_4">-->
<!--                            未上报住户数<span th:text="${citizenNoSurveyCount}"></span>户-->
<!--                        </h2>-->
                    </div>
                </div>
            </a>
        </div>

<!--        清理记录数量-->
        <div class="col-xs-3" th:if="${userType eq 4 || userType eq 5}">
            <a href="javascript:;">
                <div class="card text-white btn-purple o-hidden h-100" title="点击跳转" onclick="goUrl(5)">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="ace-icon glyphicon glyphicon-signal"></i>
                        </div>
                        <div class="mr-5" style="margin-bottom: 1rem;"><span style="font-size:20px;margin-right:10px;">清理记录数量 </span></div>
                        <h2 class="mr-5">
                            <span th:text="${clean_record_count}"></span>条
                        </h2>
                    </div>
                </div>
            </a>
        </div>

<!--        巡检设备数量-->
        <div class="col-xs-3">
            <a href="javascript:;">
                <div class="card text-white btn-grey o-hidden h-100" title="点击跳转" onclick="goUrl(6)">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="ace-icon glyphicon glyphicon-signal"></i>
                        </div>
                        <div class="mr-5" style="margin-bottom: 1rem;"><span style="font-size:20px;margin-right:10px;">村庄数量 </span></div>
                        <h2 class="mr-5" id="event_count_5">
                            <span th:text="${villageCount}"></span>个
                        </h2>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <table style="margin-top:5px;float: right">
            <tr>
                <td style="padding-left:2px;"><input class="span10 date-picker"
                                                     name="beginTime" id="beginTime"
                                                     type="text" data-date-format="yyyy-mm-dd"
                                                     readonly="readonly" style="width:88px;"
                                                     placeholder="开始日期" /></td>
                <td style="padding-left:2px;"><input class="span10 date-picker" name="endTime"
                                                     id="endTime" type="text" data-date-format="yyyy-mm-dd"
                                                     readonly="readonly" style="width:88px;"
                                                     placeholder="结束日期" /></td>
                    <td style="vertical-align:top;padding-left:2px;"><a class="btn btn-light btn-xs"
                                                                        onclick="getRecordData();"
                                                                        title="检索"><i
                            id="nav-search-icon"
                            class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i></a>
                    </td>
            </tr>
        </table>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>包保责任人上报数量</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
<!--                        <ul class="dropdown-menu dropdown-user">-->
<!--                            <li><a href="graph_flot.html#">选项1</a></li>-->
<!--                            <li><a href="graph_flot.html#">选项2</a></li>-->
<!--                        </ul>-->
                        <a class="close-link"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>督导巡检人上报数量</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
<!--                        <ul class="dropdown-menu dropdown-user">-->
<!--                            <li><a href="graph_flot.html#">选项1</a></li>-->
<!--                            <li><a href="graph_flot.html#">选项2</a></li>-->
<!--                        </ul>-->
                        <a class="close-link"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
<script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<!-- ECharts -->
<script th:src="@{/js/plugins/echarts/echarts-all.js}"></script>
<script th:src="@{/js/plugins/datapicker/bootstrap-datepicker.js}"></script>
<!-- 自定义js -->
<script th:src="@{/js/content.js?v=1.0.0}"></script>
<!-- ECharts demo data -->
<script th:src="@{/js/appjs/main_yingji.js}"></script>
</body>
</html>
